Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP23。

按照 EP17 的操作介紹，若在 ProductDetailPage 按下 "加訂單" 時應該要跳到一個供編輯 "數量"、"售價" 的畫面，並且同時顯示下訂單的 "聯絡人"、該商品的 "名稱"、"序號" 與 "價格"。

因此，來新增一個 AddOrderPage 與 AddOrderPageViewModel 吧！

首先，AddOrderPage 在專案的 Pages 資料夾中新增完成後，把其 ContentPage 的標記及其內容改成如下：

<ContentPage
    x:Class="TopStoreApp.Pages.AddOrderPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodels="clr-namespace:TopStoreApp.ViewModels"
    Title="加訂單"
    x:DataType="viewmodels:AddOrderPageViewModel"
    Shell.TabBarIsVisible="False">
    <ContentPage.ToolbarItems>
        <ToolbarItem Command="{Binding DoneCommand}" Text="完成" />
    </ContentPage.ToolbarItems>
    <VerticalStackLayout>
        <Label
            FontSize="Small"
            HorizontalOptions="StartAndExpand"
            Text="Order Owner Name"
            TextColor="Red"
            VerticalOptions="Center" />
        <Grid>
            <Label
                HorizontalOptions="FillAndExpand"
                Text="Product SN"
                VerticalOptions="Center" />
            <Label
                HorizontalOptions="End"
                Text="Product Price"
                VerticalOptions="Center" />
        </Grid>
        <Label
            FontSize="Large"
            HorizontalOptions="StartAndExpand"
            Text="Product Name"
            VerticalOptions="Center" />
        <Label
            HorizontalOptions="StartAndExpand"
            Text="數量:"
            VerticalOptions="Center" />
        <Entry
            HorizontalOptions="FillAndExpand"
            HorizontalTextAlignment="End"
            Keyboard="Numeric"
            Placeholder="請輸入購買數量"
            Text="1"
            VerticalOptions="Center" />
        <Label
            HorizontalOptions="StartAndExpand"
            Text="售價:"
            VerticalOptions="Center" />
        <Entry
            HorizontalOptions="FillAndExpand"
            HorizontalTextAlignment="End"
            Keyboard="Numeric"
            Placeholder="請輸入販售價格"
            Text=""
            VerticalOptions="Center" />
        <Label
            HorizontalOptions="StartAndExpand"
            Text="備註:"
            VerticalOptions="Center" />
        <Entry
            HorizontalOptions="FillAndExpand"
            HorizontalTextAlignment="End"
            Placeholder="請輸入備註"
            VerticalOptions="Center" />
        <Button
            BackgroundColor="{StaticResource Primary}"
            Command="{Binding DoneCommand}"
            HorizontalOptions="Center"
            Text="完成" />
    </VerticalStackLayout>
</ContentPage>

完成結果如下圖：

在這邊已經有先宣告其 ViewModel 的 DataType並使用到 DoneCommand 的 Binding，緊接著完成 AddOrderPageViewModel 就不會有問題的。

再來，AddOrderPageViewModel 在專案的 ViewModels 資料夾中新增完成後，把其程式碼改成如下：

using CommunityToolkit.Mvvm.Input;

namespace TopStoreApp.ViewModels;

public partial class AddOrderPageViewModel : BasePageViewModel
{
    [RelayCommand]
    private async void Done()
    {
        //Go Back To GoodsPage~~~
    }
}

完成結果如下圖：

接著，開啟先前撰寫在 ProductDetailPageViewModel，幫其增加其設計增加接收參數與設定的 PersonId 屬性。

增加路由參數處理：

[QueryProperty(nameof(PersonIdQueryString), "personId")]

增加可繫結屬性：

[ObservableProperty]
private string _personId;

public string PersonIdQueryString
{
    set
    {
        PersonId = value;
    }
}

完成結果如下圖：

補充:
由於 AddOrderPage 本身沒有要 Binding 此 PersonId 做為畫面顯示使用，所以其實可以不用設計成 ObservableProperty。

接著再找到其 AddOrder 方法，並把其中撰寫的 DisplayAlert 程式碼給註解，換成以下程式碼：

var routing = $"{Shell.Current.CurrentState.Location}/AddOrder?productId={EditProduct.Id}&personId={PersonId}";
await Shell.Current.GoToAsync(routing);

完成結果如下圖：

當然要完成轉跳到 AddOrderPage 的話，也要完成其路由的註冊處理，開啟 AppShell 找到建構方法，轉寫轉跳到 AddOrderPage 路由：

Routing.RegisterRoute("People/Goods/ProductDetail/AddOrder", typeof(Pages.AddOrderPage));
Routing.RegisterRoute("Orders/People/Goods/ProductDetail/AddOrder", typeof(Pages.AddOrderPage));

完成結果如下圖：

完成以上動作後基本上就可以讓兩種 "下訂單" 的方式，都能成功進入到此 "AddOrderPage" 的呈現：

呈現結果如下圖：

而內容資料還沒有正式在 AddOrderPageViewMode 當中處理，就留待下一回繼續吧~~~